<template>
  <div :class="row ? 'rement-row' : 'rement'">
    <div class="list">
      <div
        class="item"
        v-for="(item,index) in list"
        :key="index"
        @click="onGetInto(item)"
      >
        <p class="tips" v-if="item.appealTypeName!=null">{{item.appealTypeName}}</p>
        <p class="title two_text">{{item.title}}</p>
        <p class="des two_text">{{item.appealContent}}</p>
        <div class="end">
          <p class="time">{{item.createTime}}</p>
          <img src="@/assets/image/service/ico7.png" alt="">
          <span>{{item.viewNumbers}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    list:{
      type:Array,
      default:[]
    },
    row:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    //进入需求广场详情
    onGetInto(item) {
      if (item != '') {
        localStorage.setItem('DETAILS', JSON.stringify(item))
      }
      this.$router.push('demandDetails')
    },
  }
}
</script>

<style lang="scss" scoped>
.rement{
  width: 300px;
  margin-left: auto;
  .list {
    .item {
      margin-top: 26px;
      border: 1px solid #eeeeee;
      position: relative;
      padding: 55px 14px 20px;
      text-align: left;
      .tips {
        background-color: #f7f1eb;
        // padding: 5px 20px;
        color: #f09450;
        position: absolute;
        top: 17px;
        left: 0;
        width: 92px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
      }
      .title {
        font-size: 18px;
        margin-bottom: 5px;
      }
      .des {
        color: #999;
        font-size: 14px;
        margin-bottom: 15px;
      }
      .end {
        display: flex;
        color: #999;
        font-size: 12px;
        align-items: center;
        img {
          margin-left: auto;
          width: 12px;
          height: 10px;
          margin-right: 5px;
          object-fit: revert;
        }
      }
    }
  }
}
.rement-row{
  .list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .item {
      margin: 20px 37px 0 0;
      border: 1px solid #eeeeee;
      position: relative;
      padding: 55px 10px 15px 20px;
      text-align: left;
      width: 375px;
      box-sizing: border-box;
      // height: 200px;
      box-sizing: border-box;
      &:nth-child(3n + 3) {
        margin: 20px 0 0 0;
      }
      .tips {
        background-color: #f7f1eb;
        padding: 6px 20px;
        color: #f09450;
        font-size: 14px;
        position: absolute;
        top: 17px;
        left: 0;
      }
      .title {
        font-size: 18px;
        margin-bottom: 12px;
      }
      .des {
        color: #999;
        font-size: 14px;
        margin-bottom: 10px;
        height: 40px;
      }
      .end {
        display: flex;
        color: #999;
        font-size: 12px;
        align-items: center;
        img {
          margin-left: auto;
          width: 12px;
          height: 10px;
          margin-right: 5px;
          object-fit: revert;
        }
      }
    }
  }
}
</style>